<template>
<div class="table-params">
    <template v-if="data.rows.length===1 && !data.flag">
        <div class="single-row">
            <div v-if="data.desc" class="item first-item">
                <div class="item-con">
                    <span>指标</span>
                </div>
                <div class="item-con item-con-center">
                    <span>数据</span>
                    <span class="desc-item">（精确到小数点后4位）</span>
                </div>
            </div>
            <div class="item" v-for="(item, i) in data.columns" :key="i">
                <div class="item-con">
                    <span v-if="data.pointIndex===i" class="important-sign">*</span>
                    <span>&nbsp;{{item}}&nbsp;</span>
                    <el-tooltip v-if="data.tips&&data.tips[i]" effect="dark" :content="data.tips[i]" placement="right">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                    <span v-if="data.desc&&data.desc[i]" class="desc-item">（{{data.desc[i]}}）</span>
                </div>
                <div class="item-con item-con-center">{{data.rows[0][item]}}</div>
            </div>
        </div>
    </template>
    <template v-else>
        <el-table :class="data.rows.length===1 && data.flag?'single-table':''" :data="data.rows" max-height="400px">
            <el-table-column min-width="90" show-overflow-tooltip v-for="(item, i) in data.columns" :key="i" :prop="item" :label="`${item}`" align="center">
                <template slot="header">
                    <el-tooltip effect="dark" :content="item" placement="top">
                        <span class="name-tips"><span v-if="i === 2 && data.pointIndex" class="important-sign">*&nbsp;</span>{{item}}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</template>

<script>
export default {
    name: 'ParamsTable',
    props: {
        data: {
            type: Object
        }
    }
}
</script>

<style lang="less">
.table-params {
    margin-bottom: 20px;
    .single-row {
        border-top: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
        margin: 5px 79px;
    }
    .single-table {
        border-top: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
        td, th {
            border-right: 1px solid #EBEEF5;
            border-bottom: 1px solid #EBEEF5;
        }
    }
    .el-table__empty-block {
        border-bottom: 1px solid #ebeef5;
    }
    .first-item {
        background-color: #F5F5F5;
    }
    .item {
        width: 100%;
        display: flex;
        height: 54px;
        transition: background-color .25s ease;
        .item-con-center {
            display: flex;
            align-items: center;
            padding-left: 115px !important;
        }
        .item-con {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 34px;
            width: 50%;
            height: 100%;
            border-right: 1px solid #DCDFE6;
            border-bottom: 1px solid #DCDFE6;
            color: #000;
            font-family: 'PingFangSC-Regular';
            .desc-item {
                color: rgba(51, 51, 51, .65);
                font-size: 12px;
            }
        }
        &:hover {
            background: #f5f7fa;
        }
    }
    .name-tips {
        display: flow-root;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .el-table__header th {
        background: #f5f5f5;
    }
}
</style>
